import React, { useState } from 'react'
import axios from "axios"
import loadable from '../../loadable'
import style from "./css/style.module.css"
import logo from "./img/logo.jpg";
let Myinput = loadable(() => import("../../components/myinput/Myinput.jsx"))
let Verify = loadable(() => import("../../components/verfy/Verfy.jsx"))

function Index(props) {
  const [tel, settel] = useState("")
  const [pswd, setpwd] = useState("")
  const [username, setusername] = useState("")
  const [verify, setverify] = useState("")
  let register = async () => {
    let url = "/register"
    let res = await axios.post(url, { tel, pasw: pswd, username, verify })
    // console.log("999",res.data)
    if (res.data.code == 4001) {
      alert(res.data.info)
    }
    else if (res.data.code == 4002) {
      alert(res.data.info)
    }
    else if (res.data.code == 4005) {
      alert(res.data.info)
    }
    else if (res.data.code == 2001) {
      props.history.push({ pathname: "/login", state: { tel, pswd } })
    }
  }
  function toHome() {
    props.history.push({ pathname: "/", state: {} });
}
  return (

    <div className={style.parentbox}>
      <div className={style.leftBox}>
                <img src={logo} alt="" onClick={toHome} />
            </div>
      <div className={style.box}>
        <h1 className={style.head}>注册页面</h1>

        <div className={style.titlename}>电话</div>
        <Myinput vtype="text" vmodel={[tel, settel]} ></Myinput>

        <div className={style.titlename}>密码 </div>
        <Myinput vtype="password" vmodel={[pswd, setpwd]}></Myinput>

        <div className={style.titlename}>用户名</div>
        <Myinput vtype="text" vmodel={[username, setusername]}></Myinput>

        <div className={style.titlename}>验证码</div>
        <Myinput vtype="text" vmodel={[verify, setverify]}></Myinput>
        <div><Verify /></div>
        <button className={style.registerbtn} onClick={register}>注册</button>
      </div>
    </div>
  )
}

export default Index
